<script setup lang="ts">
import { defineVaDataTableColumns, useModal } from 'vuestic-ui'
import { Ref, ref, unref, watch } from 'vue'
import { useVModel } from '@vueuse/core'
import { PropType, computed, toRef } from 'vue'
import EChartsComponent from './EChartsComponent.vue'
import axios from 'axios'
import { Pagination, Sorting } from '../../../data/pages/users'

const allFilter = [
  { label: '涨停1天', key: 'zt-1', sortable: true, visible: true },
  { label: '连涨2天', key: 'zt-2', sortable: true, visible: true },
  { label: '连涨3天', key: 'zt-3', sortable: true, visible: true },
  { label: '连涨4天', key: 'zt-4', sortable: true, visible: true },
  { label: '连涨5天', key: 'zt-5', sortable: true, visible: true },
  { label: '连涨6天', key: 'zt-6', sortable: true, visible: true },
  { label: '连涨7天', key: 'zt-7', sortable: true, visible: true },
  { label: '连涨8天', key: 'zt-8', sortable: true, visible: true },

  { label: '小涨1天', key: 'xz-1', sortable: true, visible: true },
  { label: '小涨2天', key: 'xz-2', sortable: true, visible: true },
  { label: '小涨3天', key: 'xz-3', sortable: true, visible: true },
  { label: '小涨4天', key: 'xz-4', sortable: true, visible: true },
  { label: '小涨5天', key: 'xz-5', sortable: true, visible: true },
  { label: '小涨6天', key: 'xz-6', sortable: true, visible: true },
  { label: '小涨7天', key: 'xz-7', sortable: true, visible: true },
  { label: '小涨8天', key: 'xz-8', sortable: true, visible: true },

  { label: '小跌4天', key: 'xd-4', sortable: true, visible: true },
  { label: '小跌5天', key: 'xd-5', sortable: true, visible: true },
  { label: '小跌6天', key: 'xd-6', sortable: true, visible: true },
  { label: '小跌7天', key: 'xd-7', sortable: true, visible: true },
  { label: '小跌8天', key: 'xd-8', sortable: true, visible: true },
  { label: '小跌9天', key: 'xd-9', sortable: true, visible: true },


  { label: '跌3涨1', key: 'dsz-3-1', sortable: true, visible: true },
  { label: '跌3涨2', key: 'dsz-3-2', sortable: true, visible: true },
  { label: '跌3涨3', key: 'dsz-3-3', sortable: true, visible: true },
  { label: '跌3涨4', key: 'dsz-3-4', sortable: true, visible: true },
  { label: '跌3涨5', key: 'dsz-3-5', sortable: true, visible: true },


  { label: '跌4涨1', key: 'dsz-4-1', sortable: true, visible: true },
  { label: '跌4涨2', key: 'dsz-4-2', sortable: true, visible: true },
  { label: '跌4涨3', key: 'dsz-4-3', sortable: true, visible: true },
  { label: '跌4涨4', key: 'dsz-4-4', sortable: true, visible: true },
  { label: '跌4涨5', key: 'dsz-4-5', sortable: true, visible: true },

  { label: '跌5涨1', key: 'dsz-5-1', sortable: true, visible: true },
  { label: '跌5涨2', key: 'dsz-5-2', sortable: true, visible: true },
  { label: '跌5涨3', key: 'dsz-5-3', sortable: true, visible: true },
  { label: '跌5涨4', key: 'dsz-5-4', sortable: true, visible: true },
  { label: '跌5涨5', key: 'dsz-5-5', sortable: true, visible: true },

  { label: '1内涨停', key: 'zted-1', sortable: true, visible: true },
  { label: '2内涨停', key: 'zted-2', sortable: true, visible: true },
  { label: '3内涨停', key: 'zted-3', sortable: true, visible: true },
  { label: '4内涨停', key: 'zted-4', sortable: true, visible: true },
  { label: '5内涨停', key: 'zted-5', sortable: true, visible: true },
  { label: '15内涨停', key: 'zted-15', sortable: true, visible: true },
  { label: '30内涨停', key: 'zted-30', sortable: true, visible: true },

  { label: '1内跌停', key: 'dted-1', sortable: true, visible: true },
  { label: '2内跌停', key: 'dted-2', sortable: true, visible: true },
  { label: '3内跌停', key: 'dted-3', sortable: true, visible: true },
  { label: '4内跌停', key: 'dted-4', sortable: true, visible: true },
  { label: '5内跌停', key: 'dted-5', sortable: true, visible: true },
  { label: '15内跌停', key: 'dted-15', sortable: true, visible: true },
  { label: '30内跌停', key: 'dted-30', sortable: true, visible: true },

  { label: '横盘3天', key: 'hp-3', sortable: true, visible: true },
  { label: '横盘4天', key: 'hp-4', sortable: true, visible: true },
  { label: '横盘5天', key: 'hp-5', sortable: true, visible: true },
  { label: '横盘6天', key: 'hp-6', sortable: true, visible: true },
  { label: '横盘7天', key: 'hp-7', sortable: true, visible: true },
  { label: '横盘8天', key: 'hp-8', sortable: true, visible: true },

  { label: '涨3跌3', key: 'msz-3-3', sortable: true, visible: true },
  { label: '涨3跌2', key: 'msz-3-2', sortable: true, visible: true },
  { label: '涨3跌1', key: 'msz-3-1', sortable: true, visible: true },

  { label: '涨4跌3', key: 'msz-4-3', sortable: true, visible: true },
  { label: '涨4跌2', key: 'msz-4-2', sortable: true, visible: true },
  { label: '涨4跌1', key: 'msz-4-1', sortable: true, visible: true },

  { label: '涨3跌3+跌幅', key: 'mszdf-3-3', sortable: true, visible: true },
  { label: '涨3跌2+跌幅', key: 'mszdf-3-2', sortable: true, visible: true },
  { label: '涨3跌1+跌幅', key: 'mszdf-3-1', sortable: true, visible: true },

  { label: '涨4跌3+跌幅', key: 'mszdf-4-3', sortable: true, visible: true },
  { label: '涨4跌2+跌幅', key: 'mszdf-4-2', sortable: true, visible: true },
  { label: '涨4跌1+跌幅', key: 'mszdf-4-1', sortable: true, visible: true },

  { label: '收藏列表', key: 'favorites-1', sortable: true, visible: true },
];

const allcolumns = [
  { label: '股票代码', key: 'stock_code', sortable: true, visible: true },
  { label: '股票名称', key: 'stock_name', sortable: true, visible: true },
  { label: '当前价格', key: 'current_price', sortable: true, visible: true },
  { label: '昨收价', key: 'yesterday_close_price', sortable: true, visible: true },
  { label: '今开价', key: 'today_open_price', sortable: true, visible: true },
  { label: '成交量', key: 'volume', sortable: true, visible: true },
  { label: '外盘', key: 'outer_disk', sortable: true, visible: true },
  { label: '内盘', key: 'inner_disk', sortable: true, visible: true },
  { label: '买一价', key: 'buy_one_price', sortable: true, visible: true },
  { label: '买一量', key: 'buy_one_volume', sortable: true, visible: true },
  { label: '买二价', key: 'buy_two_price', sortable: true, visible: true },
  { label: '买二量', key: 'buy_two_volume', sortable: true, visible: true },
  { label: '买三价', key: 'buy_three_price', sortable: true, visible: true },
  { label: '买三量', key: 'buy_three_volume', sortable: true, visible: true },
  { label: '买四价', key: 'buy_four_price', sortable: true, visible: true },
  { label: '买四量', key: 'buy_four_volume', sortable: true, visible: true },
  { label: '买五价', key: 'buy_five_price', sortable: true, visible: true },
  { label: '买五量', key: 'buy_five_volume', sortable: true, visible: true },
  { label: '卖一价', key: 'sell_one_price', sortable: true, visible: true },
  { label: '卖一量', key: 'sell_one_volume', sortable: true, visible: true },
  { label: '卖二价', key: 'sell_two_price', sortable: true, visible: true },
  { label: '卖二量', key: 'sell_two_volume', sortable: true, visible: true },
  { label: '卖三价', key: 'sell_three_price', sortable: true, visible: true },
  { label: '卖三量', key: 'sell_three_volume', sortable: true, visible: true },
  { label: '卖四价', key: 'sell_four_price', sortable: true, visible: true },
  { label: '卖四量', key: 'sell_four_volume', sortable: true, visible: true },
  { label: '卖五价', key: 'sell_five_price', sortable: true, visible: true },
  { label: '卖五量', key: 'sell_five_volume', sortable: true, visible: true },
  { label: '最近逐笔成交', key: 'latest_transaction', sortable: true, visible: true },
  { label: '时间', key: 'transaction_time', sortable: true, visible: true },
  { label: '涨跌额', key: 'change_amount', sortable: true, visible: true },
  { label: '涨跌幅', key: 'change_percent', sortable: true, visible: true },
  { label: '最高价', key: 'highest_price', sortable: true, visible: true },
  { label: '最低价', key: 'lowest_price', sortable: true, visible: true },
  { label: '买入价格/成交量', key: 'buy_sell_price_volume_buy', sortable: true, visible: true },
  { label: '卖出价格/成交量', key: 'buy_sell_price_volume_sell', sortable: true, visible: true },
  { label: '成交额', key: 'turnover_amount', sortable: true, visible: true },
  { label: '成交量', key: 'turnover_volume', sortable: true, visible: true },
  { label: '市盈率', key: 'pe_ratio', sortable: true, visible: true },
  { label: '股本', key: 'capitalization', sortable: true, visible: true },
  { label: '总市值', key: 'total_market_value', sortable: true, visible: true },
  { label: '流通市值', key: 'circulating_market_value', sortable: true, visible: true },
  { label: '振幅', key: 'amplitude', sortable: true, visible: true },
  { label: '换手率', key: 'turnover_rate', sortable: true, visible: true },
  { label: '市净率', key: 'pb_ratio', sortable: true, visible: true },
  { label: '委比', key: 'commission_ratio', sortable: true, visible: true },
  { label: '量比', key: 'volume_ratio', sortable: true, visible: true },
  { label: '日期', key: 'date', sortable: true, visible: true },
  { label: '创建时间', key: 'created_at', sortable: true, visible: true },
  { label: '更新时间', key: 'updated_at', sortable: true, visible: true },
  { label: '操作', key: 'actions', align: 'right', visible: true }
];

const columns = ref(defineVaDataTableColumns([
  { label: '股票代码', key: 'stock_code', sortable: true, visible: true },
  { label: '股票名称', key: 'stock_name', sortable: true, visible: true },
  { label: '当前价格', key: 'current_price', sortable: true, visible: true },
  { label: '昨收价', key: 'yesterday_close_price', sortable: true, visible: true },
  { label: '今开价', key: 'today_open_price', sortable: true, visible: true },
  { label: '成交量', key: 'volume', sortable: true, visible: true },
  { label: '外盘', key: 'outer_disk', sortable: true, visible: true },
  { label: '内盘', key: 'inner_disk', sortable: true, visible: true },
  { label: '买一价', key: 'buy_one_price', sortable: true, visible: true },
  { label: '买一量', key: 'buy_one_volume', sortable: true, visible: true },
  { label: '买二价', key: 'buy_two_price', sortable: true, visible: true },
  { label: '买二量', key: 'buy_two_volume', sortable: true, visible: true },
  { label: '买三价', key: 'buy_three_price', sortable: true, visible: true },
  { label: '买三量', key: 'buy_three_volume', sortable: true, visible: true },
  { label: '买四价', key: 'buy_four_price', sortable: true, visible: true },
  { label: '买四量', key: 'buy_four_volume', sortable: true, visible: true },
  { label: '买五价', key: 'buy_five_price', sortable: true, visible: true },
  { label: '买五量', key: 'buy_five_volume', sortable: true, visible: true },
  { label: '卖一价', key: 'sell_one_price', sortable: true, visible: true },
  { label: '卖一量', key: 'sell_one_volume', sortable: true, visible: true },
  { label: '卖二价', key: 'sell_two_price', sortable: true, visible: true },
  { label: '卖二量', key: 'sell_two_volume', sortable: true, visible: true },
  { label: '卖三价', key: 'sell_three_price', sortable: true, visible: true },
  { label: '卖三量', key: 'sell_three_volume', sortable: true, visible: true },
  { label: '卖四价', key: 'sell_four_price', sortable: true, visible: true },
  { label: '卖四量', key: 'sell_four_volume', sortable: true, visible: true },
  { label: '卖五价', key: 'sell_five_price', sortable: true, visible: true },
  { label: '卖五量', key: 'sell_five_volume', sortable: true, visible: true },
  { label: '最近逐笔成交', key: 'latest_transaction', sortable: true, visible: true },
  { label: '时间', key: 'transaction_time', sortable: true, visible: true },
  { label: '涨跌额', key: 'change_amount', sortable: true, visible: true },
  { label: '涨跌幅', key: 'change_percent', sortable: true, visible: true },
  { label: '最高价', key: 'highest_price', sortable: true, visible: true },
  { label: '最低价', key: 'lowest_price', sortable: true, visible: true },
  { label: '买入价格/成交量', key: 'buy_sell_price_volume_buy', sortable: true, visible: true },
  { label: '卖出价格/成交量', key: 'buy_sell_price_volume_sell', sortable: true, visible: true },
  { label: '成交额', key: 'turnover_amount', sortable: true, visible: true },
  { label: '成交量', key: 'turnover_volume', sortable: true, visible: true },
  { label: '市盈率', key: 'pe_ratio', sortable: true, visible: true },
  { label: '股本', key: 'capitalization', sortable: true, visible: true },
  { label: '总市值', key: 'total_market_value', sortable: true, visible: true },
  { label: '流通市值', key: 'circulating_market_value', sortable: true, visible: true },
  { label: '振幅', key: 'amplitude', sortable: true, visible: true },
  { label: '换手率', key: 'turnover_rate', sortable: true, visible: true },
  { label: '市净率', key: 'pb_ratio', sortable: true, visible: true },
  { label: '委比', key: 'commission_ratio', sortable: true, visible: true },
  { label: '量比', key: 'volume_ratio', sortable: true, visible: true },
  { label: '日期', key: 'date', sortable: true, visible: true },
  { label: '创建时间', key: 'created_at', sortable: true, visible: true },
  { label: '更新时间', key: 'updated_at', sortable: true, visible: true },
  { label: '操作', key: 'actions', align: 'right', visible: true }
]));

const props = defineProps({
  list: {
    type: Array,
    required: true,
  },
  stockdetail: { type: Array, default: false },
  loading: { type: Boolean, default: false },
  sortBy: { type: String, required: true },
  sortingOrder: { type: String as PropType<Sorting['sortingOrder']>, required: true },
  condition: { type: Array, default: false },
})

const selectedFilter = ref([])

const days = ref(45)

const selectedValues = ref([
    "date", "stock_code", "stock_name", "change_percent", "change_amount", "amplitude", "turnover_rate", "total_market_value", 
    "turnover_amount", "turnover_volume", "outer_disk", "inner_disk", "buy_one_volume", "sell_one_volume", 
    "pb_ratio", "commission_ratio", "volume_ratio"
]); // 存储选中的复选框值

watch(
    selectedValues,
    (newValue, oldValue) => {
        console.log("监听事件", newValue, oldValue)
        fetch()
    },
    { deep: true },
)

const getname = (key) => {
    let name = ""
    allcolumns.forEach(value => {
        if (key == value.key) {
            name = value.label
        }
    })
    return name
}


const addFavorite = (stock_code, stock_name) => {
    console.log(stock_code, stock_name)
    try {
        let par = {
            "stockCode": stock_code,
            "stockName": stock_name,
        }
        // 发送 POST 请求
        axios.post('http://localhost:9527/decs-mst/api/add-favorite', par)
            .then(response => {

            })
            .catch(error => {
            // 处理错误响应
                console.error('Error:', error);
            })
    } catch (error) {
        console.error('Error fetching users:', error);
    }
}

const delFavorite = (stock_code, stock_name) => {
    console.log(stock_code, stock_name)
    try {
        let par = {
            "stockCode": stock_code,
            "stockName": stock_name,
        }
        // 发送 POST 请求
        axios.post('http://localhost:9527/decs-mst/api/delete-favorite', par)
            .then(response => {
                
            })
            .catch(error => {
            // 处理错误响应
                console.error('Error:', error);
            })
    } catch (error) {
        console.error('Error fetching users:', error);
    }
}

const fetch = () => {
    const newcolumns = []
    selectedValues.value.forEach(value => {
        newcolumns.push({
            label: getname(value), 
            key: value, 
            sortable: true, 
            visible: true,
        })
    })

    const columns = defineVaDataTableColumns(newcolumns)

    return columns
}

const emit = defineEmits<{
  (event: 'update:stockdetail', stockdetail: []): void  
  (event: 'update:condition', condition: []): void
  (event: 'update:sortBy', sortBy: Sorting['sortBy']): void
  (event: 'update:sortingOrder', sortingOrder: Sorting['sortingOrder']): void
}>()

const stockdetailVModel = useVModel(props, 'stockdetail', emit)
const conditionVModel = useVModel(props, 'condition', emit)
const sortByVModel = useVModel(props, 'sortBy', emit)
const sortingOrderVModel = useVModel(props, 'sortingOrder', emit)

var showChart = ref(true)

const stockdetailss = ref([])

const stockNameData = ref([])

const handleMouseOver = (code) => {
    // showChart = ref(true)
    // const newCondition = []
    // stockdetailVModel.value = newCondition
    // emit('update:stockdetail', newCondition)
    showChart.value = true
    try {
        const config = {
            headers: {
            'Content-Type': 'application/json', // Specify content type if needed
            'Authorization': 'Bearer your-token' // Example of adding authorization header
            }
        };
        let par = {
            "stockCode": code,
            "days": days.value,
        }

        // 发送 POST 请求
        axios.post('http://localhost:9527/decs-mst/api/detail', par)
            .then(response => {
                console.log('Response:', response.data);
                stockdetailss.value = response.data.char
            })
            .catch(error => {
            // 处理错误响应
                console.error('Error:', error);
            })
    } catch (error) {
        console.error('Error fetching users:', error);
    }

    console.log(handleMouseOver, code, stockdetailss.value)
}

const handleMouseLeave = (code) => {
    showChart.value = false
    console.log(handleMouseLeave, code)
}

const dayChange = (num) => {
    days.value = num
}


</script>

<template>
    <div v-show="showChart" style="position: relative;">
        <div class="chart-popup" @click="handleMouseLeave(22)">
        <EChartsComponent :data="stockdetailss" :name="stockNameData"/>
        </div>
    </div>

    <div>
      <div v-for="item in allFilter" :key="item.label">
        <VaCheckbox
        style="float: left;display: block;width:600px;margin: 10px 10px 10px 0px;"
        v-model="conditionVModel"
        :array-value="item.key"
        :label="item.label"
        />
      </div>
      <p style="display: table;clear: both;"></p>  

      <div v-for="item in allcolumns" :key="item.label">
        <VaCheckbox
        style="float: left;display: block;width:600px;margin: 10px 10px 10px 0px;"
        v-model="selectedValues"
        :array-value="item.key"
        :label="item.label"
        />
      </div>
      <p style="display: table;clear: both;"></p>

      <p style="display: table;clear: both;">
        一共：{{ list ? list.length : 0 }} 个优质股票~
        <a @click="dayChange(30)"> 30 </a>
        <a @click="dayChange(45)"> 45 </a>
        <a @click="dayChange(60)"> 60 </a>
        <a @click="dayChange(75)"> 75 </a>
        <a @click="dayChange(90)"> 90 </a>
        <a @click="dayChange(120)"> 120 </a>
        <a @click="dayChange(240)"> 240 </a>
      </p>
      
    </div>
    <VaDataTable
    v-model:sort-by="sortByVModel"
    v-model:sorting-order="sortingOrderVModel"
    :columns="fetch()"
    :items="list"
    :loading="$props.loading"
    >
    <template #cell(stock_code)="{ rowData }">
      <div 
      style="cursor: grab;"
      @mouseover="handleMouseOver(rowData.stock_code)"
      class="max-w-[120px] ellipsis"
      >
      {{ rowData.stock_code }}
      </div>
    </template>

    <template #cell(stock_name)="{ rowData }">
      <div 
      style="cursor: grab;"
      class="max-w-[120px] ellipsis"
      >
        {{ rowData.stock_name }}
        <VaButton
          style="margin-left: 10px;"
          preset="primary"
          size="small"
          icon="mso-add"
          aria-label="Add Favorite"
          @click="addFavorite(rowData.stock_code, rowData.stock_name)"
        />

        <VaButton
          style="margin-left: 10px;"
          preset="primary"
          size="small"
          icon="mso-delete"
          aria-label="Add Favorite"
          @click="delFavorite(rowData.stock_code, rowData.stock_name)"
        />
      </div>
    </template>
    </VaDataTable>

</template>

<style scoped>
.checkbox-group {
  display: flex; /* 使用 flexbox 布局 */
  flex-wrap: wrap; /* 允许换行 */
  gap: 10px; /* 复选框之间的间距 */
}

.checkbox-group va-checkbox {
  display: flex;
  align-items: center;
}

.chart-popup {
  position: fixed;
  top: 400px;
  right: 20px;
  width: 1100px; /* 调整图表宽度 */
  height: 540px; /* 调整图表高度 */
  background-color: white;
  border: 1px solid #ddd;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  padding-top: 40px;
}
</style>